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The only primitive geometric objects that computer graphics hardware typically can draw are points, lines 
and polygons. Usually there are special mechanisms to draw images, text characters, et cetera, but these 
are not commonly considered “geometric” since they are not usually transformed by geometric operations 
like rotation and perspective projection. 


Obviously it is important that graphics programs be able to draw more complex geometric forms from 
simple circles to complex surfaces in three dimensions. In real computer hardware, curves are usually 
drawn as a series of short straight line segments, and surfaces as meshes of polygons, usually triangles or 
quadrilaterals. 


A major problem in the design of graphics libraries is to provide a high level interface to the hardware 
that allows users to draw curves and surfaces from higher level descriptions rather than to require them to 
reduce curves and surfaces to line segments and polygons themselves. 


In this paper we will discuss some methods that are used to draw curves; many surface generating tech- 
niques are similar, but needless to say, the situation there is often far more complicated. 


1 Preliminaries 


In the discussion that follows, we assume that the reader is at least aware of how points are transformed 
from their object coordinate system to screen coordinates by means of matrix multiplications. If not, a 
fairly complete elementary description of this can be found in: 


http://www. geometer.org/mathcircles/cghomogen. pdf 

In that paper can be found derivations for all of the transformation matrices used below, for example. 

If you are unfamiliar with matrix multiplications of pairs of matrices or of matrices with vectors, look at: 
http://www.geometer.org/mathcircles/Matrices.pdf 


As a quick review, here are the key things to remember: 


e Points are written as column vectors with an extra coordinate. If two-dimensional points are consid- 
ered, the column vector will have three entries, usually called the z, the y, and the w coordinate. In 
three dimensions, the column vector will have four components : x, y, z, and w. In most cases, the 
final w coordinate is equal to 1.0 and the other coordinates are unchanged from their usual values 
in a cartesian coordinate system. 


If the w coordinate is not equal to 1.0, then the cartesian coordinates corresponding to the column 
vector (%,y,2,w)? is (2/w,y/w,z/w). (The “T” that looks like an exponent above means the 
transpose of the row vector to make a column vector. This just saves space in the text.) In the 
examples below, vectors are written in their transposed forms. ! 


e Almost all of the common geometric operations can be performed on these column vectors by 
means of a premultiplication by a matrix. In two dimensions, it is a 3 x 3 matrix, and in three 


' This system for identifying points is called “homogeneous coordinates”, and is used in a branch of mathematics called projective 
geometry. If we allow the w coordinate to equal zero (as we do in projective geometry), we have a reasonable way to deal with 
“points at infinity” that are transformed to finite “vanishing points” by perspective projections. 


dimensions, it will be a 4 x 4 matrix. These common transformations include translation, rota- 
tion, scaling, mirroring, shearing, and perspective projections, as well as any combination of these 
transformations. 


Following are a few examples that illustrate typical operations and the corresponding matrices in 
three dimensions. To convert to the two-dimensional forms, simply erase the third row and column 
of each matrix (except, of course, in the case of the perspective projection where the eye is looking 
along the z-axis). 


Rotation about the origin in the x — y plane” by an angle 0: 


x cos@é -—sin@é 0 0 x xcos6 — ysind 

R y| _|sin@ cos? 0 0 y xsin@ + ycosé 
eel | 0 0 1 0} fz z 
1 0 0 0 1 1 1 


Translation by tz, ¢,, and ¢, in the x, y, and z directions, respectively: 


x 100 & x B+ ty 

yj {|O 104 y ytty 
Teastyte 12] =10 0 1 t.| lz] |2t+4, 

1 0 0 0 1 1 


Finally, here is the matrix corresponding to a very simple perspective projection that apparently 
projects the points in a 90° box from the origin to the plane z = 1 as indicated in Figure 1. Notice 
that this is our only example where the w coordinate is affected: 


z 10 0 0 £ £ 
D y| |O 1 0 0 y| _ y 

z 0011 z z+1 

1 00 1 0 1 z 


All the above transformations can be combined simply by multiplying the corresponding matrices. 
Thus there is a single 4 x 4 matrix that represents the result of a rotation followed by a translation 
followed by a different rotation about a different axis, and finally by a perspective projection and it 
is equal to the product of the four matrices corresponding to the individual operations. 


2 _P — (x, y, 2) 
id 


Figure 1: A Simple Perspective Projection 


>The subscript z of R indicates that the rotation is about the z-axis, which is perpendicular to the a — y plane and passes through 
the origin. 


2 Parametric Curve Descriptions 


From now on, to simplify things somewhat, we will consider only two-dimensional curves in the 7 — y 
plane. In every case, these ideas can be extended to three dimensions in the obvious way, simply by 
describing what happens to the z coordinates in the same way as we do the z and y coordinates. 


Most people are familiar with certain simple ways to describe special curves. For example, the equation 
that describes a circle centered at the point (cz, cy) and having radius r is this: 


(a — 05)? + (y— ey)? =. 


This is very nice for some applications, but it is almost useless to a computer. Unless the computer 
somehow knows that this is the equation of a circle, how does it even begin to guess what values of x 
are appropriate to use to calculate the corresponding y values (of which there can be zero, one, or two, 
depending)? And even if it could, there is the nasty requirement that a square-root be taken for each 
evaluation—an operation that may slow things considerably. 


The other problem is that although standard forms like the equation of a circle above exist for a few curves, 
quite often a graphics programmer may want something completely non-standard. What, for example, is 
the form of a curve that traces the backbone of a dinosaur in Jurassic Park VII? 


If possible, the best way to represent curves on a computer is by means of parametric equations. In other 
words, it is nice to be able to describe the x and y coordinates of a curve (and the z coordinate if you’re 
using curves that twist through three dimensions like the backbone of that dinosaur) in terms of a single 
parameter ¢ that varies over some fixed range. 


Sometimes this is trivial. For example, if we wish to describe the parabola y = x? from z = —1toz = 1, 
we can do it as follows: 
ai)=t, yQ=P, -1<t<1. (1) 


Notice that the equations for x(t) and y(¢) satisfy the original equation: y(t) = (x(t))?, and that as ¢ 
varies from —1 to 1, then x does as well. 


From the computer’s point of view, this is a wonderful representation. If it is desired to approximate the 
curve as 20 short straight line segments, just connect the following points in order: (a(—1.0), y(—1.0)), 
(z(—.9), y(—.9)),..., (z(1.0), y(1.0)). Notice that this will grind out a series of 21 points equally spaced 
along the x axis. The coordinates of each pair are easy to calculate; Equation | gives explicit formulas to 
calculate both x(¢) and y(t). 


Figure 2: x(t) = y(t) =# versus x(t) = y(t) =? 


There are many ways to represent the same curve parametrically. For example, both of the following 
descriptions represent the same straight line segment = y from = Otox = 1: 


a(t)=t, y(t)=t, 0<t<1, (2) 


and 
BNSC, Wt Ot: (3) 


Both parameterizations are illustrated with equally-spaced values of ¢ in Figure 2. The results of plotting 
Equation 2 are on the left, and those for Equation 3 are on the right. 


In this case, Equation 2 is probably better in every way. The functions x(¢) and y(t) are easier to calculate, 
and in addition, the points described in Equation 3 are not equally spaced—they are closer together near 
t = 0 than near t = 1, so if the curve is calculated with evenly-spaced values of ¢, the curve is more 
accurately approximated in some parts than in others. 
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Figure 3: x(t) = sin 4¢, y(t) = sin 5t 


Although the function sin¢ is not particularly simple to calculate, some of the power of a parametric 
representation is illustrated in Figure 3, where a(t) = sin 4¢ and y(t) = sin 5é, forO < t < 2m. By 
changing the 4 and 5 to other integers (it works best if the integers you choose are relatively prime), very 
different curves can be obtained. 


It is possible to describe a circle parametrically, but it is surprisingly messy. Here is one of the best 
parametric descriptions for the circle of radius 1 centered at the origin: 
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Figure 4: Two Circle Parameterizations 


It is easy enough to check that the parameterization works; simply calculate (a(t))? + (y(¢))? and verify 
that it is always equal to 1: 

_ a2 At? — 4241 

ee ee ee 


(x())” + w@))? 


The equations themselves are not particularly nice; both involve a floating-point division (which is usually 
a relatively slow operation in computer hardware), and some method must be found to choose suitable 
values for ¢ in the doubly-infinite range —co < t < ow. 


Even with these moderately ugly equations, there is an additional problem. Even if we allow ¢ to vary 
over all real numbers, the parameterization above still omits one point on the circle, namely, the point 
(1,0) that is approached either as t + —oo or as ¢ + +00. 


The image on the left in Figure 4 shows the result of evaluating ¢ in uniform steps of length 0.2 from 
t = —10.0 to ¢ = 10.0. The steps are far too close on the right, and they do not even come close enough 


together to make a reasonable circle there. The steps on the left are probably too far apart for a good 
circle. 


There is one trick we can perform that seems magical at first, but those versed in projective geometry will 
see that it is a natural and obvious result, given that the circle is a special form of a conic section. Since we 
know that the computer hardware is working not on two-dimensional vectors, but on three-dimensional 
vectors with an additional w-coordinate, and since the denominators of x(t) and y(£) are the same, why 
not describe the parameterization as follows: 


a(#)=#-1, y(t)=2t, w(t)=#+1, -xwo<t<oo. (5) 


Since the values of z(t) and y(¢) are automatically divided by the value of w(t) in the computer hardware 
this will work perfectly. There is still a division, of course, but that division had to be done anyway if the 
scene is viewed in perspective. 


The problem of having an infinite domain for ¢ can also be solved without too much trouble. For example, 
if we only allow ¢ to vary from —1 to 1 in Equations 4 or 5, then only a half-circle is drawn. A similar 
equation can be written for the other half of the circle (just flip the sign in the definition of 2(t)) and 
the circle can be drawn in two halves. Notice that even if ¢ is restricted to this smaller range, the points 
generated are not evenly spaced on the circle. The results of this double parameterization are displayed 
in the illustration on the right in Figure 4. Both the left and right sides of the circle are evaluated by 
stepping ¢ by 0.05 from t = —1.0 tot = 1.0. 


Notice that circles (and other curves generated in a similar way with a variable w coordinate) are trans- 
formed correctly by any of the standard transformation matrices. They can be rotated, translated, scaled, 
mirrored, or put through perspective projections. Since any conic section (ellipse, parabola, hyperbola, or 
circle) is just a projection of a circle, it is clear that any of those curves can be generated by some paramet- 
ric equation with a varying value of w in the same way as are circles. In fact, if you know the values of the 
entries in the appropriate projection matrix you can just multiply the column vector (¢? — 1, 2¢, 4? + 1)" 
by that matrix to obtain the parameterization of any conic section. 


3 A Hardware Hack 


Graphics hardware is generally highly parallel, and there are usually plenty of available adders, multi- 
pliers, et cetera, available to perform somewhat non-standard operations, assuming some sucker can be 
talked into writing a bit of microcode. 


Since the hardware is usually built to work in three dimensions using 4 x 4 matrices, there is a fairly 
simple hardware hack that can be done that will generate points not only on segments of conic sections, 
but on any curve where the parameterizations of x(t), y(¢), z(¢), and w(£) are all cubic polynomials of 
the form at? + bt? + ct + d, where a, b, c, and d are constant real numbers. Obviously we can let a = 0 
if we want quadratic equations, or a = b = 0 for linear equations, et cetera. 


Parametric curves whose components are polynomials are usually called “splines” or “spline curves”, 
especially if the value of the w component is the constant 1.0. If w varies, they are usually called “rational 
splines”. Commonly used splines include the B-spline, the Bézier spline, the cubic spline, the Hermite 
spline, et cetera. 


Let us begin with a few observations. In the most general case, we would like to generate automatically a 
set of equations of the following form: 


a(t) = ast? + aot? +a1t+ 29 
y(t) = yst? +yot? +yit + yo 
z(t) = 2gt? + zot? + 21t + 20 
w(t) = wet? + wot? + wit + wo, 


3Usually circles drawn this way are divided into four quarters which gives better overall accuracy with fewer values of ¢ evalu- 
ated. 


where Zg,..., wg are all constant real numbers. A bit of thought shows that this is equivalent to: 


x(t) %3 22 21 2X e 

y(t)| _ | ys ye wm yo] |e 6) 
z(t) 23 22 2 2 t |° 

w(t) W3 We Wr Wo 1 


Thus, if we have a nice way to generate the values of #°, ¢?, and ¢, we can just plug them into the vector 
on the right of Equation 6 and premultiply by the matrix on the left of the #-vector. Note that it may be 
important to transform these points with rotations, perspective projections, et cetera, but those operations 
simply involve premultiplications by other 4 x 4 matrices. All these premultiplications can be combined 
So successive points can be generated by successively plugging in new values of the powers of ¢ into the 
column vector and then multiplying it by the matrix of polynomial coefficients for the cubic functions to 
obtain points that trace out the curve in question. 


This is pretty good, but we can do better! 


We will simplify things here by assuming that we want ¢ to vary from 0 to 1, but the values below can 
be adjusted suitably to work for any finite range of values of t. We will generate successive values of the 
vector (£3, t?, t, 1)” using only a series of additions. 


Let d be the difference we want between successive values of ¢. For example, if we want to evaluate ¢ for 
10 equal steps between 0 to 1, we would set d = 1/10. Consider the following matrix: 


6d? 6d? d® 0 


0 20 @& 0 
0 0 d 0 
0 0 oO 1 


The right column is (0, 0,0, 1)", the value of the desired vector (t°, ¢?,t, 1)" when t = 0. Now consider 
the following operation on the matrix: Add the third column to the fourth, then the second column to the 
third, and finally, the first column to the second. Leave the first column unchanged, and we obtain: 


6d? 12d? 7d? d 


0 2d 30 #& 
0 0 d d 
0 0 0 1 


The right column represents the value of our vector (£?, #7, t, 1) when t = d. Repeat the same addition 
operation to obtain: 
6d? 18d? 19d? 8d? 
0 2d 5d? 4d? 
0 0 d 2d 
0 0 0 1 


The right column corresponds to the value of that same vector when t = 2d. Verify yourself that if the 
operation is repeated two more times that the values for £ = 3d and t = 4d are obtained. This always 
works. Why? 


So now, instead of having to do multiplications to obtain values of #°, ¢? and t, we simply have to do a 
set of parallel additions. This is not a particularly great savings, since floating-point additions are as ugly 
as multiplications, but we can go one step further—we don’t even have to do the matrix multiplication in 
Equation 6! All we need to do is perform the multiplication: 


L3 £2 Ly Lo 68 6d3 & 0 
ys Yo Yi Yo 0 2d @ 0 (7) 
zg 22 0 0 d O 
wg We Wi Wo 0 0 0 1 


and iterate that by adding the columns as above, and this will generate all the points on the curve. It is 
not hard to prove that this is so, but let us just work out a few points on the circle described in Equation 5 
beginning at é = 0 and with d = 0.1. We will just assume that the z-coordinate is the constant zero. 


Plugging the values of 0, .1, .2, and .3 for ¢ into Equation 5, we obtain: 


t=0 (—1,0,0,1)7 

—e (—.99, .2,0, 1.01)" 
LS 2 (—.96, .4, 0, 1.04)” 
t=3 (—.91, .6, 0, 1.09)" 


Now let’s see what we get by doing the matrix multiplication in Expression 7, where: 


X3 Bip) Ly LO 010 -!1 
ys Y2 Yi Yo! _ 002 0 
R83 v2) ral 20 0 0 0 0 
W3 We Wi Wo 0 1 0 1 
and 
6d°> 6d° d® 0 .006 .006 .001 0 
0 2d @ O| | 0 02 O11 0 
0 0 d Oj] — 0 0 1 0 
0 0 0 1 0 0 0 1 
We obtain: 
010 -1 .006 .006 .001 0 0 02 01 -1 
00 2 O 0 02 01 0 ue 0 0 2 O (8) 
000 =O 0 0 1 0 0 0 0 0 
010 1 0 0 0 1 0 02 01 1 


We seem to be on the right track; the right column of the matrix on the right of Equation 8 is the value 
corresponding to ¢ = 0. If we iterate that matrix three more times, we obtain: 


0 .02 03 —.99 0 .02 05 —.96 0 02 07 -.91 
0 0 2 2 0 0 .2 A 0 0 2 6 
0 0 O 0 : 0 0 0 0 ? 0 0 0 0 
0 .02 03 1.01 0 .02 .05 1.04 0 02 .07 1.09 


The values in the right columns are exactly the ones we need! 


But there is still more. We can also premultiply by all the transformation matrices that might rotate, scale, 
or put into perspective the points on the curve, and then iterate that. So for the cost of one premullti- 
plication, we can generate an arbitrary number of points on the curve with 12 additions each, and those 
additions can be done four at a time with appropriately designed parallel hardware. 


There are moderately simple ways to modify this method to generate points on any sort of rational cubic 
spline curve, which covers perhaps 99.99% of all curves ever drawn on a computer screen. 


4 Splines 


One of the easiest ways to draw and control curve shapes is using splines*. There are various sorts of 
splines, but the shape of each is controlled using a set of control points. The curve does not necessarily 
pass through the control points, although it is required to for some splines, but it is drawn toward those 
points. 


4The name “spline” comes from a flexible piece of wood called a spline used by draftsmen in the old days to draw curves. 
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Figure 5: A few Bézier Splines 


There are many types of splines, but here we will consider only cubic Bézier splines (sometimes called 
cubic Bézier curves). A few examples of these are illustrated in Figure 5. In that figure, the control points 
are labeled P,, P2, P3, and P,. The splines are the curves beginning at P, and ending at Py. 
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Figure 6: Linking Bézier Splines 


The dotted straight lines connecting the control points are drawn simply to illustrate a property of Bézier 
curves, namely, that the initial and final parts of the curve are tangent to the lines P, P2 and P4.P3. This 
tangency requirement makes it easy to construct more complex curves that fit together nicely using mul- 
tiple segments as shown in Figure 6. Notice that as long as points Ps, P, and Ps lie on the same line and 
Pg, Pz and Pg also lie on a line, the curves will come together with matching tangents and will appear to 
make a smooth transition?. 


It is quite simple to write down the parametric curve for the cubic Bézier spline defined by the four 
control points P;, P2, P3 and P4. If we consider the control points to be vectors (in either two or three 
dimensions), the parametric definition of the Bézier spline associated with them is given by: 


Bp,,py,P,,p,(t) = (1-19 PF, + 3301 - t)°tP) + 3(1 - 1) P3 + PO Py. (9) 


The functions (1 — ¢)?, 3(1 — t)?#, 3(1 — #)#? and #° are called the “Bézier basis” for the spline curves. 
Notice that they are the results of expanding the expression ((1 — #) + t)°. The Bézier basis for n + 1 
control points is obtained by replacing the 3 in the exponent by n. Every other polynomial spline can 
be described using exactly the same form as in Equation 9 but with the basis functions replaced by other 
polynomials in £. It is easy to see that when ¢ = 0 the value will be P,, and when ¢ = 1, the value will be 
P,. Intermediate values of ¢ generate points along some curve connecting P; with P,. 


In Section 3 we described a method to generate for a circle a matrix that can be iterated in a somewhat 
strange way using 12 additions such that its rightmost column will step through points on the curve with 


5 Actually, to get true smoothness, the distance P3P4 must be the same as P4Ps5 and similarly Pg Pz must be equal to P7 Ps. 
This is because the tangent vectors at the endpoints have magnitudes proportional to the vectors connecting the control points. 


each iteration. There is a wonderful way to do exactly this for every curve that can be described as a cubic 
spline or rational cubic spline. 


Without proof, here is the construction. 


Let P; = (pir, pi2,pi3, pia)’ for i = 1,2,3,4. Let t vary from t = 0 to t = 1 in steps of size d. In 
addition, there is a 4 x 4 basis matrix that depends only on the spline type; for Bézier splines that basis 
matrix will be: 


-1 3 -3 1 
3 -6 3 O 
-3 3 0 0 
1 0 0 0 
Perform the following matrix multiplication: 
Pu Piz Pig Pra -1 3 -3 1\ /6d 62 d 0 
poi p22 peg pea 3-6 3 O 0 2 @ O (10) 
P31 P32 p33 psa -3 3 0 0 0 0 d O 
P41 Pag Pag Pa 1 0 0 O 0 0 0 1 


where the matrix involving d is the same as the one used in Expression 7 and it will generate a matrix that 
can be iterated to grind out successive points on the Bézier curve defined by the control points P,, P2, Ps 
and P, with spacing d. To see why, look at the top row of the product of the first two matrices: 


(—pi + 8p12 — 3pig + pa, 3p11 — 6pi2 + 3p13, —3p11 + 3p12, Pir). (11) 


Recalling that the matrix on the right effectively generates under iteration points of the form (3, t?,¢,1)", 
when multiplied by the top row shown in Expression 11 of the product of the two matrices on the left of 
Expression 10 yields: 


(—pi + 3pi2 — 3pis + pia)t® + (3p11 — 6pi2 + 3pis)t? + (—3pi1 + 3p12) tpi. (12) 
A little algebra shows that Expression 12 is equivalent to: 


pi (1 — 3t + 3¢? — t°) + pio (3 — 6t + 327) + pig(—3¢? + 327) + pit 
=(1- tpi +30- t)*tpie +30- t)t? pis ste pia, 
just as it should. The other rows multiply out in exactly the same way and hence the grand product of 


the three matrices in Expression 10 can be iterated to generate points on the Bézier curve defined by the 
control points P;, P2, P3 and P,. 


